import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/svg.dart';

import 'package:get/get.dart';
import 'package:smart_translator/app/style/widget_style.dart';

import '../../../routes/app_pages.dart';
import '../../../style/app_colors.dart';
import '../../../widgets/AppHeader.dart';
import '../../../widgets/CommonWidgets.dart';
import '../controllers/connecting_device_controller.dart';

class ConnectingDeviceView extends GetView<ConnectingDeviceController> {
  const ConnectingDeviceView({super.key});
  @override
  Widget build(BuildContext context) {
    return SafeArea(child: Scaffold(
        body: SingleChildScrollView(
          child: Stack(
            children: [
              Container(
                child: SvgPicture.asset(
                  "assets/images/header_part_bg.svg",
                  width: Get.width,
                ),
              ),
              AppHeader.obtainHeaderWithoutTitleAndRightPart(),
              Container(
                width: Get.width,
                margin: EdgeInsets.only(top: 95.h),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  mainAxisSize: MainAxisSize.max,
                  children: [
                    Container(
                      width: Get.width,
                      padding: EdgeInsets.all(20.w),
                      child: Column(
                        children: [
                          Text('搜索中...',style:  TextStyle(
                              color: AppColors.big_title_color,
                              fontSize: 24.sp,
                              fontWeight: FontWeight.w900
                          )),
                          Text('请保持蓝牙打开',style: AppStyleThemeData.normal),
                          SizedBox(height: 45.h,),
                          Row(
                            children: [
                              Text('步骤一',style: AppStyleThemeData.PAGE_TITLE,)
                            ],
                          ),
                          Container(
                            width: Get.width,
                            padding: EdgeInsets.only(left: 25.w,right: 25.w,top: 25.w),
                            margin: EdgeInsets.all(25.w),
                            decoration: BoxDecoration(
                              boxShadow: [
                                CommonWidgets.getBoxShadow(),
                              ],
                              color:Colors.white,
                              borderRadius: BorderRadius.circular(16), // Optional: add border radius
                            ),
                            child: Column(
                              children: [
                                Text('短按录音按钮, 白灯亮起表示设备已开启.',style: AppStyleThemeData.normal,),
                                Image.asset('assets/images/zhiyi_pro_bg.png',height: 92.w,width: 140.w,)
                              ],
                            ),
                          ),
                          Row(
                            children: [
                              InkWell(
                                onTap: () {
                                  showpoupWindow(context);
                                },
                                child: Text('步骤二',style: AppStyleThemeData.PAGE_TITLE),
                              )
                            ],
                          ),
                          InkWell(
                            onTap: () {
                              showpoupWindow(context);
                            },
                            child: Container(
                              width: Get.width,
                              padding: EdgeInsets.all(25.w),
                              margin: EdgeInsets.all(25.w),
                              decoration: BoxDecoration(
                                boxShadow: [
                                  CommonWidgets.getBoxShadow(),
                                ],
                                color:Colors.white,
                                borderRadius: BorderRadius.circular(16), // Optional: add border radius
                              ),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text('请将您的智译Pro靠近您的手机.',style: AppStyleThemeData.normal,),

                                ],
                              ),
                            ),
                          )

                        ],
                      ),
                    ),
                    SizedBox(height: 174.h,),
                    Text('访问产品帮助',style: AppStyleThemeData.linkStyle,)
                  ],
                ),
              )
            ],
          ),
        )
    ),top: false);
  }


  void showpoupWindow(BuildContext context) {
    showModalBottomSheet(
      context: context,
      builder: (context) => SafeArea(child: Container(
        padding: EdgeInsets.all(20.h),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('智译Pro',style: AppStyleThemeData.PAGE_TITLE,),
            SizedBox(height: 17.h,),
            Image.asset('assets/images/product_device1.png',width: 128.w, height: 128.h),
            SizedBox(height: 15.h,),
            Container(
              width: Get.width,
              child: ElevatedButton(
                  onPressed: () {
                    Get.back();
                    Get.toNamed(Routes.HOME);
                  },
                  child: const Text("连接")
              ),
            )
          ],
        ),
      )),
      backgroundColor: Colors.white
      
    );
  }
}
